<template>
  <div>
    <div style="width: 100%;  overflow: hidden; position: relative;" v-bind:style="bodyStyle">
      <div :id="mapId" style="height: 100%; width: 100%;">
      </div>
      <div class="uni-heng"></div>
      <div class="uni-shu"></div>
    </div>
    <div style="padding: 20px;">
      <el-button type="primary" size="small" :disabled="changePos" @click="changePosition">{{changePos?'在地图上标点':'更改位置'}}</el-button>
      <div style="margin-top: 40px; font-size: 12px; color: #333333;">
        使用说明<br/>
        1、旋转地图角度到通过十字架能合适对准角度的位置<br/>
        2、调整VR角度，使得方向上一致<br/>
        3、完成核对后保存
      </div>
    </div>

  </div>
</template>

<script>
  import * as HMAP from './hmap.manage.js'
  // var vrMesh = null;
  export default {
    props: {
      type: String,
      bodyStyle:  {
        type: Object,
        default: () => {
          return {
            height: '400px'
          }
         }
      }
    },
    data () {
      return {
        mapId: 'mapanglecheck_' + Math.random().toString(36).substr(2),
        mapManager: null,
        mapParam: {},
        floorId: null,
        changePos: false
      }
    },
    activated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(true)
      }
    },
    deactivated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(false)
      }
    },
    beforeDestroy () {
      if (this.mapManager) {
        this.mapManager.destroy()
        this.mapManager = null
      }
    },
    mounted() {
      this.mapManager = new HMAP.Hmap(this.mapId, {
      	mapStorage: true, 						      // 使用地图缓存功能，加快加载速度
      	viewMode: HMAP.ViewMode.Mode_3D, 	// 初始二维还是三维状态,默认是3D状态
        maxDistance: 2000000,               // 摄像头最远距离
      });
      this.mapManager.on('onMapClick', (e) => {
        if(this.changePos) {
          this.changePos = false
          var x = this.toFixed(e.position.x);
          var y = this.toFixed(e.position.y);
          this.setMeshPosition(x, y);
          this.$emit("onPositionChange", x, y);
        }
      })
      this.mapManager.on('onCompass', (e) => {
        this.rotateVr(e.rotateAngle);
        this.rotateMesh(e.rotateAngle);
      })
      this.mapManager.showAxes();
    },
    methods: {
      changePosition() {
        this.changePos = true
      },
      setVrMesh(item) {
        this.mapManager.addMesh({
          objId: 'vrMesh',
          objType: 'vr',
          floorIds: [this.floorId],
          x: item.x,
          y: item.y,
          z: 20,
          meshUrl: 'https://xcfiles.oss-cn-shanghai.aliyuncs.com/common/checkAngle.png',
          angle: item.angle-90
        })
        this.mapManager.mapMoveTo({
          x: item.x,
          y: item.y,
          z: 20
        })
      },
      setMeshPosition(x, y) {
        var meshData = this.mapManager.getMeshById("vrMesh")
        if(meshData) {
          meshData.x = x
          meshData.y = y
          if(meshData.object3D) {
            meshData.object3D.position.set(x, y, 20);
          }
        }
        this.mapManager.mapMoveTo({
          x: x,
          y: y,
          z: 20
        })
      },
      rotateMesh(angle) {
        var meshData = this.mapManager.getMeshById("vrMesh")
        if(meshData) {
          meshData.angle = angle-90;
          if(meshData.object3D) {
            meshData.object3D.rotation.z = -Math.PI / 2 + angle * (Math.PI/180)
          }
        }
      },
      rotateVr(angle) {
        this.$emit("onRotateVr", angle )
      },
      _getMapFile(floorData) {
        if(!floorData) {
          return null;
        }
        if(this.type === 'ibeacon') {
          return floorData.ibeaconMap
        } else if(this.type === 'vr') {
          return floorData.vrMap
        }
        return floorData.mapFile
      },
      _getFloorData(floorId) {
        for(var i=0; i<this.floorList.length; i++) {
          if(this.floorList[i].id === floorId) {
            return this.floorList[i];
          }
        }
        return null;
      },
      showFloor(floorId, callback){
        if(!this.mapManager) {
          return;
        }
        if( !floorId || floorId === "" ) {
          this.mapManager.showFloors([]);
          return;
        }
        this.floorId = floorId;
        var floorData = this._getFloorData(floorId)
        this.mapManager.addFloor({
        	floorId: floorId,  				// 必须：楼层Id
        	floorName: floorData.name,					// 必须：楼层名称
        	floorHeight: floorData.height,						// 必须: 楼层展示的z坐标
        	floorMap: this._getMapFile(floorData),	// 必须: 地图文件
        	buildingName: floorData.buildingName,					// 必须: 所属楼宇
			longitude: floorData.longitude,
			latitude: floorData.latitude
        })
        this.mapManager.showFloors([floorId]);
        this.mapManager.spreadMap({
        	spreadRatio: 1, 									        // 伸缩倍数
        	duration: 0.3,											      // 动画秒数
        	rotateAngle: floorData.singleRotateAngle,	// 地图旋转角度
        	tiltAngle: 90,										// 地图到xy面的角度
        	distance: floorData.singleCameraDis,									// 摄像头距离中心点距离
        	targetX: floorData.centerX,									   		// 目标点X轴
        	targetY: floorData.centerY,									   		// 目标点Y轴
        	targetZ: 0                                        // 目标点Z轴
        })
      },
      resize () {
        this.$nextTick(() => {
          if (this.mapManager) {
            this.mapManager.resize()
          }
        })
      }
    },
    computed: {
      floorList: {
        get () {
          return this.$store.state.shopdata.floorList
        }
      }
    }
  }
</script>
<style scoped="scoped">
  .uni-heng {
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    background-color: #ff0000;
  }
  .uni-shu {
    width: 1px;
    height: 100%;
    position: absolute;
    left: 50%;
    z-index: 10;
    top: 0;
    background-color: #ff0000;
  }
</style>
